<template>
  <div class="box">
    <van-nav-bar
      title="通知"
      fixed
    />
    <section>
      <div class="hidden">
        <ul>
          <van-swipe-cell v-for="item of data" :key="item.message_id">
            <li>
              <img :src="item.message_uservia" alt="">
              <p class="li-right">
                <span>
                  <b>推荐消息</b>
                  <button @click="Jump(item)">查看</button>
                </span>
                <i v-html="item.message_content"></i>
              </p>
            </li>
            <!-- <template #right>
              <van-button square type="danger" text="删除" @click="del(item)" />
            </template> -->
          </van-swipe-cell>
        </ul>
      </div>
    </section>
  </div>
</template>

<script>
import Vue from 'vue'
import { NavBar, SwipeCell, Button } from 'vant'
import { getInform } from '@/api'
Vue.use(NavBar)
Vue.use(SwipeCell)
Vue.use(Button)
export default {
  data () {
    return {
      data: [
        { message_id: '', message_uservia: '' }
      ]
    }
  },
  computed: {},
  mounted () {
    getInform().then(res => {
      // console.log(res)
      this.data = res.data.data
      // console.log(res.data.data)
    })
  },
  methods: {
    // 跳转到
    Jump (item) {
      this.$router.push('/inform/informDetail?message_id=' + item.message_id)
    }
    // 删除通知
    // del (item) {
    //   // console.log(item.message_content)
    // }
  }
}
</script>

<style lang="scss" scoped>
/deep/ .van-nav-bar {
  z-index: 100;
}
/deep/ .van-nav-bar__title {
  font-size: 0.18rem;
  color: #171717;
  font-weight: bold;
}
section{
  flex: 1;
  font-family:PingFang SC;
  overflow: hidden;
  margin-top: 0.46rem;
  .hidden{
    height: 100%;
    overflow: auto;
    ul {
      list-style: none;
      .van-button {
        height: 100%;
      }
      li {
        height: 0.9rem;
        width: 100%;
        padding: 0 0.2rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        &+li {
          margin-top: 0.01rem;
        }
        img{
          height: 0.5rem;
          width: 0.5rem;
        }
        .li-right{
          height: 100%;
          width: 2.7rem;
          background:rgba(255,255,255,1);
          box-shadow:0px 1px 0px 0px rgba(97,97,97,0.1);
          display: flex;
          flex-direction: column;
          span{
            width: 100%;
            height: 0.17rem;
            display: flex;
            justify-content: space-between;
            margin-top: 0.305rem;
            margin-bottom: 0.1rem;
            b{
              width: 0.595rem;
              height: 100%;
              font-size: 0.14rem;
              font-weight:500;
              color:rgba(51,51,51,1);
            }
            button {
              height: 0.19rem;
              width: 0.5rem;
              border-radius: 0.05rem;
              border:0.005rem solid rgba(255,89,89,1);
              background-color: white;
              font-size:0.12rem;
              font-weight:500;
              color:rgba(255,89,89,1);
            }
          }
          i{
            width: 2.6rem;
            height: 0.16rem;
            font-size: 0.12rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-weight:400;
            color:rgba(102,102,102,1);
          }
        }
      }
    }
  }
}
</style>
